<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>弹幕系统</title>
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script src="./js/vue.min.js"></script>
    <script src="./js/elementui.js"></script>
    <link rel="stylesheet" href="./css/review.css">
    <link rel="stylesheet" href="./css/elementui.css">
    <link rel="stylesheet" href="./css/danmu.css">
    <link rel="stylesheet" href="./css/user.css">
    <link rel="stylesheet" type="text/css" href="./css/toastr.min.css">
    <script type="text/javascript" src="./js/toastr.min.js"></script>
</head>
<body>
    <div id="app">
      <div class="form">
        <div class="danmuWrap">
          <div @click="selectStyle=0" :class="selectStyle==0?'danmu-select-active':''" class="danmu-select">
            <div  class="danmu-container" >
              <div class="speech-bubble speech-bubble0"><div class="speech-bubble-txt">选择这种弹幕样式</div></div>
            </div>
          </div>
          <div @click="selectStyle=1" :class="selectStyle==1?'danmu-select-active':''" class="danmu-select">
            <div  class="danmu-container" >
              <div class="speech-bubble speech-bubble1"><div class="speech-bubble-txt">选择这种弹幕样式</div></div>
            </div>
          </div>
          <div @click="selectStyle=2" :class="selectStyle==2?'danmu-select-active':''" class="danmu-select">
            <div  class="danmu-container" >
              <div class="speech-bubble speech-bubble2"><div class="speech-bubble-txt">选择这种弹幕样式</div></div>
            </div>
          </div>
          
          
         
        </div>
        <div class="submitWrap">
          <input  placeholder="请输入内容" v-model="form.content" />
          <div class="submitButton" @click="onSubmit">发送</div>
        </div>
      </el-form>
      <div class="phonewrap" v-if="dialogVisible">
        <div class='phone_item_wrap'>
          <div class='phone_item_left '>手机号</div>
          <div class='phone_item_right'>
            <el-input v-model="phone"></el-input>
          </div>
        </div>
        <div class='phone_item_wrap'>
          <div class='phone_item_left phone_item_left_none'></div>
          <div class='phone_item_right phone_item_right1'>
            <el-button type="primary" @click="handleClickPhone" class="createcode">确 定</el-button>
          </div>
        </div>
        
      </div>
    </div>
    
    <script>
       
          // 创建URL对象
        const urlObj = new URL(window.location.href);

        // 使用URLSearchParams获取查询参数
        const params = new URLSearchParams(urlObj.search);

        // 获取nickname参数
        const nickname = decodeURIComponent(params.get('nickname'));
        console.log(nickname);
        // 获取headimgurl参数
        const headimgurl = params.get('headimgurl');

        // 获取openid参数
        const openid = params.get('openid');

        // 创建一个Vue实例
        new Vue({
          el: '#app',
          data: {
            selectStyle:0,
            form:{
              sender:'zanwu',
              content:''
            },
            cansubmit:true,
            phone:'',
            userInfo:{},
            dialogVisible: false
            
          },
          mounted(){
            this.getUserInfo();
          },
          methods:{
            addUser(){
              $.ajax({
                url: '/api/user/add',
                method:'POST',
                contentType:'application/json',
                data:JSON.stringify({
                  openid:openid,
                  avatarUrl:headimgurl,
                  nickName:nickname
                }),
                success:(res)=>{
                  
                  this.getUserInfo();

                },
                error:function(){

                }
              })
            },
            getUserInfo(){
              var url = window.location.href;

              // 使用URLSearchParams来解析URL中的参数
              var params = new URLSearchParams(url.split('?')[1]);

              // 获取code参数的值
              var code = params.get('code');

              
              $.ajax({
                url: '/api/user/getInfo',
                method:'POST',
                contentType:'application/json',
                data:JSON.stringify({
                  openid:openid
                }),
                success:(res)=>{
                  console.log(res);
                  if(res.length>0){
                    this.userInfo =res[0]
                    // if(!this.userInfo.phone){
                    //   setTimeout(() => {
                    //     this.updatephone();
                    //   }, 100);
                      

                    // }
                  }else{
                    this.addUser();
                  }
                },
                error:function(){

                }
              })
            },
            updatephone(phone){
              $.ajax({
                url: `/api/user/update/${this.userInfo.id}`,
                method:'PUT',
                contentType:'application/json',
                data:JSON.stringify({
                  phone:phone
                }),
                success:(res)=>{
                  this.getUserInfo();
                  setTimeout(() => {
                    this.onSubmit();
                  }, 600);
                },
                error:function(){

                }
              })
            },
            handleClickPhone(){
              //正则判断手机号
              const myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
              if(!myreg.test(this.phone)){
                toastr.error('手机号格式不正确');
                return;
              }
              this.updatephone(this.phone);
              this.dialogVisible = false;
            },
            onSubmit(){
              const _this = this;
              _this.loading = true;
              if(this.form.content==''){
                toastr.error('内容不能为空');
                return;
              }
              if(this.form.content.length>30){
                toastr.error('内容不能超过30字');
                return;
              }
              if(this.userInfo.phone){
                $.ajax({
                  url: '/api/danmu/add',
                  method:'POST',
                  contentType:'application/json',
                  data:JSON.stringify({
                    'sender':this.userInfo.phone,
                    'content':this.form.content,
                    'style_type':this.selectStyle+''
                  }),
                  success:(res)=>{
                    
                    toastr.success('发送成功');
                    // setTimeout(() => {
                    //   window.location.reload();
                    // }, 200);
                    this.form.content = '';
                  },
                  error:function(err){
                    toastr.error(err.responseJSON.message);
                  }
                })
              }else{
                this. dialogVisible = true;
              }
              
             
            }
          },

        });
      </script>
</body>
</html>